<template>
  <div class="pay">
    <van-nav-bar title="在线支付" />
    <div class="main">
      <div class="tip">
        <p class="countdown-title">支付剩余时间</p>
        <h3 class="countdown-text">{{ countDown }}</h3>
      </div>
      <section class="home">
        <ul class="list info-list">
          <li>
            <span
              class="order-name"
              v-if="Object.keys(orderInfo).length !== 0"
            >{{ orderInfo.shopInfo.rst.name }}</span>
            <span class="text-highlight">¥{{ orderInfo.totalPrice }}</span>
          </li>
        </ul>
        <div class="title">在线支付</div>
        <ul class="list payment-list">
          <li class="payment-list-item">
            <div class="icon">
              <img alt src="@/assets/wechart.jpg" />
              <span>微信</span>
            </div>
            <i class="fa fa-check-circle selected" />
          </li>
        </ul>
      </section>
      <van-button @click="confirmPayment" :disabled="timerOut" class="pay-btn" round size="large" type="primary">确认支付</van-button>
    </div>
  </div>
</template>

<script>
import { NavBar, Button ,Notify } from "vant";
export default {
  components: {
    [NavBar.name]: NavBar,
    [Button.name]: Button,
    [Notify.name]: Notify,
  },
  data() {
    return {
      orderInfo: {},
      selectFoods:[],
      rst:{},
      totalPrice:'',
      countDown: "00:15:00",
      timerOut: false
    };
  },
  activated() {
    this.setOrderInfo();
    this.countTimeDown();
  },
  computed: {
    myAddress(){
      return this.$store.getters.myAddress
    },
    servings(){
      return this.$store.getters.servings
    },
    note(){
      return this.$store.getters.note
    }

  },
  methods: {
    setOrderInfo() {
      this.orderInfo = this.$store.getters.orderList;
      this.rst=this.$store.getters.orderList.shopInfo.rst
      this.selectFoods=this.$store.getters.orderList.selectFoods
      this.totalPrice=this.$store.getters.orderList.totalPrice
    },
    // 倒计时
    countTimeDown() {
      let minute = 14;
      let second = 59;
      let timer = setInterval(() => {
         second--;
        if (second < 0) {
          second = 59;
          minute--;
          if (minute < 10) {
            minute = "0" + minute;
          }
        }

        if (second < 10) {
          second = "0" + second;
        }

        this.countDown = "00" + ":" + minute + ":" + second;

        if (second <= 0 && minute <= 0) {
          this.countDown = "订单已超时";
          this.timerOut = true;
          clearInterval(timer);
        }
      }, 1000);
    },
    // 确认支付
    confirmPayment(){
      const orderInfo={
        rst:this.orderInfo.shopInfo.rst,
        selectFoods:this.selectFoods,
        totalPrice:this.totalPrice
      }
      const remarkInfo={
        servings:this.servings,
        note:this.note
      }
      const orderlist={
        orderInfo:orderInfo,
        userInfo:this.myAddress.item,
        totalPrice:this.totalPrice,
        remarkInfo:remarkInfo,
      }
       Notify({ type: 'success', message: '支付成功，正在跳转' });
       this.timerOut=true     
      axios.post(`/api/user/add_order/${localStorage.getItem('token')}`,orderlist).then(res=>{  
        this.$router.push('/order')
      })
    }
  }
};
</script>

<style scoped>
.van-nav-bar {
  background-color: #009eef;
}
.pay {
  width: 100%;
  height: 100%;
}

.main {
  overflow: auto;
  width: 100%;
  height: 100%;
}

.tip {
  display: block;
  padding: 15px;
  text-align: center;
  color: #333333;
  border-bottom: 1px solid #cccccc;
  background-color: #ffffff;
}

.countdown-title {
  font-size: 18px;
  margin-bottom: 15px;
  color: #666666;
}

.countdown-text {
  font-size: 30px;
  height: 30px;
  color: #333333;
}

.list {
  border-bottom: 1px solid #cccccc;
  background: #ffffff;
}

.info-list {
  padding: 0 20px;
}

.info-list li {
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  padding: 15px 0;
}

.info-list li .order-name {
  display: inline-block;
  overflow: hidden;
  max-width: 60%;
  margin-right: 16px;
  vertical-align: bottom;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #333333;
}

.text-highlight {
  color: #ff6000;
}

.title {
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  color: #999999;
  background-color: #f5f5f5;
}

.payment-list-item {
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  border-bottom: 1px solid #cccccc;
}

.icon {
  display: flex;
  align-items: center;
}

.payment-list-item img {
  width: 30px;
  height: 30px;
  margin-right: 5px;
}

.payment-list-item > i {
  font-size: 20px;
  color: #eeeeee;
}

.selected {
  color: #4cd964 !important;
}

.pay-btn {
  display: block;
  width: 90%;
  margin: 30px auto;
}
</style>